<template>
<div style="width: 1000px;" v-loading="loading">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Main' }" >首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'RegisterView' }" >员工登记</el-breadcrumb-item>
        <el-breadcrumb-item >员工编辑</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <hr style="margin-bottom: 10px;">
    <span style="margin-left: 50px;font-weight: 700;">基本信息</span>
    <hr style="margin-top: 10px;">
    <el-form
    ref="ruleFormRef"
    style="max-width: 900px;margin-top: 10px;"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
  <el-row :gutter="20">
    <el-col :span="12" :offset="0">
      <el-form-item label="姓名:" prop="Name" size="large">
        <el-input v-model="ruleForm.Name" />
      </el-form-item>
    </el-col>
    <el-col :span="12" :offset="0">
      <el-form-item label="性别:" prop="Sex" size="large">
      <el-select v-model="ruleForm.Sex" placeholder="">
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
    </el-form-item>
    </el-col>
  </el-row>
   <el-row :gutter="20">
    <el-col :span="12" :offset="0">
        <el-form-item label="手机号:" prop="Phone" size="large">
        <el-input v-model="ruleForm.Phone" />
      </el-form-item>
    </el-col>
    <el-col :span="12" :offset="0">
        <el-form-item label="院校:" prop="Shcool" size="large">
        <el-input v-model="ruleForm.Shcool" />
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12" :offset="0">
        <el-form-item label="专业:" prop="Specialty" size="large">
        <el-input v-model="ruleForm.Specialty" />
      </el-form-item>
    </el-col>
    <el-col :span="12" :offset="0">
        <el-form-item label="家庭住址:" prop="Address" size="large">
        <el-input v-model="ruleForm.Address" />
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12" :offset="0">
        <el-form-item label="学历:" prop="Education" size="large">
      <el-select v-model="ruleForm.Education" placeholder="">
        <el-option label="小学" value="小学" />
        <el-option label="初中" value="初中" />
        <el-option label="高中" value="高中" />
        <el-option label="大专" value="大专" />
        <el-option label="大学本科" value="大学本科" />
        <el-option label="研究生" value="研究生" />
      </el-select>
    </el-form-item>
    </el-col>
    <el-col :span="12" :offset="0">
        <el-form-item label="政治面貌:" prop="PoliticsStatus" size="large">
        <el-input v-model="ruleForm.PoliticsStatus" />
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12" :offset="0">
        <el-form-item label="民族:" prop="Nation" size="large">
        <el-input v-model="ruleForm.Nation" />
      </el-form-item>
    </el-col>
    <el-col :span="12" :offset="0">
        <el-form-item label="籍贯:" prop="Birthplace" size="large">
        <el-input v-model="ruleForm.Birthplace" />
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12" :offset="0">
      <el-form-item label="婚姻:" prop="Marriage" size="large">
        <el-select v-model="ruleForm.Marriage" placeholder="">
            <el-option label="不清楚" value="不清楚" />
            <el-option label="已婚" value="已婚" />
            <el-option label="未婚" value="未婚" />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="12" :offset="0">
        <el-form-item label="出生年月:" prop="Birthday" size="large">
        <el-date-picker
                v-model="ruleForm.Birthday"
                type="date"
                placeholder="Pick a day"
                size="large"
                style="width: 370px;"
            />
        </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12" :offset="0">
        <el-form-item label="邮箱:" prop="Email" size="large">
        <el-input v-model="ruleForm.Email" />
      </el-form-item>
    </el-col>
    <el-col :span="12" :offset="0">
        <el-form-item label="身份证号:" prop="IdNumber" size="large">
        <el-input v-model="ruleForm.IdNumber" />
      </el-form-item>
    </el-col>
  </el-row>
  <hr style="margin-bottom: 10px;">
    <span style="margin-left: 50px;font-weight: 700;">职业信息</span>
  <hr style="margin-top: 10px;margin-bottom: 10px;">
  <el-row :gutter="20">
    <el-col :span="12" :offset="0">
        <el-form-item label="部门:" prop="DepartmentId" size="large">
        <el-select v-model="ruleForm.DepartmentId" placeholder="" @change="handleChange">
            <el-option v-for="item in Department" :key="item.value" :value="item.value" :label="item.label" ></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="12" :offset="0">
        <el-form-item label="职位:" prop="PositionId" size="large">
        <el-select v-model="ruleForm.PositionId" placeholder="" @change="handleChanges">
            <el-option v-for="item in Position" :key="item.value" :value="item.value" :label="item.label" ></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12" :offset="0">
        <el-form-item label="员工类别:" prop="EmployeeType" size="large">
        <el-select v-model="ruleForm.EmployeeType" placeholder="">
            <el-option label="实习工" value="实习工" />
            <el-option label="试用工" value="试用工" />
            <el-option label="正式员工" value="正式员工" />
            <el-option label="已离职" value="已离职" />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="12" :offset="0"></el-col>
  </el-row>
  <br>
  <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
</el-form>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router'

const route = useRoute();
const router = useRouter();

const Positions = ref([
  { label: '部长', value: 1, Parent: 1 },
  { label: '副部长', value: 2, Parent: 1 },
  { label: '经理', value: 3, Parent: 1 },
  { label: '部长', value: 4, Parent: 2 },
  { label: '副部长', value: 5, Parent: 2 },
  { label: '经理', value: 6, Parent: 2 },
  { label: '部长', value: 7, Parent: 3 },
  { label: '副部长', value: 8, Parent: 3 },
  { label: '经理', value: 9, Parent: 3 },
])
const Position = ref()
const handleChanges = (selectedValue: any) => {
    // 根据选中的value获取对应的label
    const selectedPosition = Positions.value.find(position => position.value === selectedValue);
    if (selectedPosition) {
        console.log('选中的 PositionId:', selectedValue);  // value
        console.log('选中的 label:', selectedPosition.label); // label
        ruleForm.value.Position = selectedPosition.label
    }
}

const Department = ref([
    { label: '人事部', value: 1 },
    { label: '市场部', value: 2 },
    { label: '财务部', value: 3 },
])
const handleChange = (selectedValue: any) => {
    ruleForm.value.PositionId = null;
    Position.value = Positions.value.filter(positions => positions.Parent == selectedValue);
    // 根据选中的value获取对应的label
    const selectedPosition = Department.value.find(position => position.value === selectedValue);
    if (selectedPosition) {
        console.log('选中的 PositionId:', selectedValue);  // value
        console.log('选中的 label:', selectedPosition.label); // label
        ruleForm.value.Department = selectedPosition.label;
    }    
}

interface RuleForm {
  Id: number,
  Guid: string,
  Name: string,
  Sex: string,
  Phone: string,
  Shcool: string,
  Specialty: string,
  Address: string,
  Education: string,
  PoliticsStatus: string,
  Nation: string,
  Birthplace: string,
  Marriage: string,
  Birthday: Date | null,
  Email: string,
  IdNumber: string,
  DepartmentId: number | null,
  Department: string,
  PositionId: number | null,
  Position: string,
  EmployeeType: string,
  Hiredate: Date | null,
  State: string,
  UpdatedBy: string,
  UpdatedDate: Date
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
  Id: 0,
  Guid: "3242432",
  Name: "",
  Sex: "",
  Phone: "",
  Shcool: "",
  Specialty: "",
  Address: "",
  Education: "",
  PoliticsStatus: "",
  Nation: "",
  Birthplace: "",
  Marriage: "",
  Birthday: null,
  Email: "",
  IdNumber: "",
  DepartmentId: null,
  Department: "",
  PositionId: null,
  Position: "",
  EmployeeType: "",
  Hiredate: null,
  State: "待入职",
  UpdatedBy: localStorage.username,
  UpdatedDate: new Date()
})
const rules = reactive<FormRules<RuleForm>>({
    Name: [
        { required: true, message: '姓名不能为空', trigger: 'blur' },
    ],
    Sex: [        
        {
            required: true,
            message: '性别不能为空',
            trigger: 'change',
        }
    ],
     Phone: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
    ],
     Shcool: [
        { required: true, message: '院校不能为空', trigger: 'blur' },
    ],
     Specialty: [
        { required: true, message: '专业不能为空', trigger: 'blur' },
    ],
     Address: [
        { required: true, message: '家庭住址不能为空', trigger: 'blur' },
    ],
    Education: [
        {
            required: true,
            message: '学历不能为空',
            trigger: 'change',
        }
    ],
    DepartmentId: [
        {
            required: true,
            message: '部门不能为空',
            trigger: 'change',
        }
    ],
    PositionId: [
        {
            required: true,
            message: '职位不能为空',
            trigger: 'change',
        }
    ],
    EmployeeType: [
        {
            required: true,
            message: '员工类别不能为空',
            trigger: 'change',
        }
    ],
})
const GetTable = () => {
  var id = route.query.id
  axios.get("/pread/api/ReadRegister/GetRegister?id=" + id).then(res => {
    ruleForm.value.Id = res.data.Data.Id
    ruleForm.value.Guid = res.data.Data.Guid
    ruleForm.value.Name = res.data.Data.Name
    ruleForm.value.Sex = res.data.Data.Sex
    ruleForm.value.Phone = res.data.Data.Phone
    ruleForm.value.Shcool = res.data.Data.Shcool
    ruleForm.value.Specialty = res.data.Data.Specialty
    ruleForm.value.Address = res.data.Data.Address
    ruleForm.value.Education = res.data.Data.Education
    ruleForm.value.PoliticsStatus = res.data.Data.PoliticsStatus
    ruleForm.value.Nation = res.data.Data.Nation
    ruleForm.value.Birthplace = res.data.Data.Birthplace
    ruleForm.value.Marriage = res.data.Data.Marriage
    ruleForm.value.Birthday = res.data.Data.Birthday
    ruleForm.value.Email = res.data.Data.Email
    ruleForm.value.IdNumber = res.data.Data.IdNumber
    ruleForm.value.Department = res.data.Data.Department
    ruleForm.value.Position = res.data.Data.Position
    ruleForm.value.EmployeeType = res.data.Data.EmployeeType
    ruleForm.value.Hiredate = res.data.Data.Hiredate
    ruleForm.value.State = res.data.Data.State
    ruleForm.value.DepartmentId = res.data.Data.DepartmentId
    handleChange(res.data.Data.DepartmentId)
    ruleForm.value.PositionId = res.data.Data.PositionId
    loading.value = false
  })
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post("/pwrite/api/Register/UpdRegister",ruleForm.value).then(res => {
        if (res.data.Data) {
            ElMessage({
                message: "保存成功",
                type: "success",
                duration: 1000
            })
            router.push("RegisterView")
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  router.push("/RegisterView")
}

const loading = ref(true)

onMounted(() => {
  GetTable();
})
</script>
<style scoped>
</style>